{% extends '_admin.html' %}
{% import 'public.html' as public %}

{% block title %}{{ custom.Brand }} | {{ custom.AppName }} - 收費記錄報表 {% endblock %}

{% set DataName='收費記錄' %}

{% macro licenseplateimg_path(file) %}
{% if file  %}{{url_for('static',filename=file)}}{% else %}{{url_for('static',filename='images/default/vehicle.jpg')}}{% endif %}
{% endmacro %}


{% block main_contain %}
<div class="row" id="DataManager">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
              <div class="btn-group">
                <button type="button" class="btn btn-info" data-toggle="modal" data-target="#FilterModal">
                  <i class="fas fa-search"></i> 篩選
                </button>
                <button type="button" class="btn btn-info" @click="filters_manage"><i class="fas fa-undo"></i> 重置</button>
              </div>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
              <table id="DataView" class="table table-bordered table-hover text-center">
                <thead style="font-size: large;">
                <tr>
                  {% for k, v in ColumnName.items() %}
                  {% if k in ('ClassesID','ChargeTime','ChargeType','VehicleType','LicensePlate','TicketNumber','CardNumber','CashierName','UserName','PayMent','Money')%}
                  {% if k == 'Money' %}<th>{{ v }} MOP</th>{% else %}<th>{{ v }}</th>{% endif %}
                  {% endif %}
                  {% endfor %}
                </tr>
                </thead>
                <tbody style="font-size: x-large;">
                    {% if TableDatas %}
                    {% for i in TableDatas %}
                    <tr>
                        <td>{{ i.ClassesID }}</td>
                        <td>{{ i.datetime_string(i.ChargeTime) }}</td>
                        <td>{{ ChargeTypes[i.ChargeType] }}</td>
                        <td>{{ VehicleTypes[i.VehicleType] }}</td>
                        <td>{{ i.LicensePlate }}</td>
                        <td>{{ i.TicketNumber }}</td>
                        <td>{{ i.CardNumber }}</td>
                        <td>{{ i.CashierName }}</td>
                        <td>{{ i.UserName }}</td>
                        <td>{{ PayMents[i.PayMent] }}</td>
                        <td>{{ i.Money }}</td>
                    </tr>
                    {% endfor %}
                    {% endif %}
                </tbody>
                <tfoot style="font-size: x-large;">
                  <tr>
                    <td colspan="7"></td>
                    <td>合計</td>
                    <td>{{ Counts }} 筆</td>
                    <td>總收入</td>
                    <td>10000.00</td>
                  </tr>
                </tfoot>
              </table>
            </div>
            <!-- /.card-body -->
          </div>
    </div>

  <!--删除-->
  <div class="modal fade" id="RecoveryModal" data-backdrop="static" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header justify-content-center">
            <h2 class="modal-title text-danger"><i class="fas fa-exclamation-triangle"></i> 請注意</h2>
        </div>
        <div class="modal-body text-center">
            <p class="h5">{[ RecoveryData.Message ]}</p>
        </div>
        <div class="modal-footer justify-content-center">
            <button type="button" class="btn btn-success" @click="commit_data('Recovery')">確認</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        </div>
        </div>
        <!-- /.modal-content -->
    </div>
  <!-- /.modal-dialog -->
  </div>

  <div class="modal fade" id="FilterModal" data-backdrop="static" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <form id="FilterForm">
        <div class="modal-content">
          <div class="modal-header justify-content-center">
              <h4 class="modal-title">篩選{{ DataName }}</h4>
          </div>
          <div class="modal-body">
            <div v-for="(val, key) in FiltersData" class="row justify-content-center">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">{[ ColumnName[key] ]}</span>
                </div>
                <input v-model="FiltersData[key]" type="text" class="form-control" id="FilterEntranceTime">
              </div>
            </div>
          </div>
          <div class="modal-footer justify-content-center">
              <button type="button" class="btn btn-success" data-dismiss="modal" @click="filters_manage('SetFilter')">查找</button>
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </form>
    </div>
  <!-- /.modal-dialog -->
  </div>

</div>

{% endblock %}


{% block scripts %}
{{ super() }}
{{ public.DataTables_Export_JS() }}
<script>
    // 设备管理器
    var DataManager = new Vue({
        el: '#DataManager',
        delimiters: ['{[', ']}'],
        data: {
          ViewData:{
            VehicleType:'',
            LicensePlate:'',
            LicensePlateImg:"{{url_for('static',filename='images/default/vehicle.jpg')}}",
            EntranceTime:'',
          },
          RecoveryData:{
            ParkingID: '',
            Message: '',
          },
          FiltersData: {
            EntranceTime:''
          },
          ColumnName: JSON.parse('{{ ColumnNameJSON|safe }}'),
        },
        methods: {
          // 刷新查询条件
          refresh_filters(){
            let filters = JSON.parse('{{ FiltersJSON|safe }}')
            for(key in this.FiltersData){if(filters.hasOwnProperty(key)){this.FiltersData[key]=filters[key]}}
          },
          // 重置查询条件
          filters_manage(key){
            let p_data = {ResetFilter: 'ParkingFilter'}
            if(key=='SetFilter'){p_data={SetFilter: this.FiltersData}}
            axios.post("{{ url_for('recovery.parking') }}", p_data)
            .then(response => {if(response.status==200){setTimeout("window.location.reload()")}})
            .catch(function (error) {alert(error)})
          },
          // 提交数据
          commit_data(key){
            let p_data = ''
            if(key=='Delete'){p_data={Delete: this.DeleteData}}
            axios.post("{{ url_for('recovery.parking') }}", p_data)
            .then(response => {
              if(response.status==200){
                let ret = response.data
                AppMessage.fire({icon: ret.icon, text: ret.text})
                if(ret.icon=='success'){
                  if($('#DeleteModal').css('display')=="block"){$("#DeleteModal").modal('toggle')}
                  setTimeout("window.location.reload()", 2000);
                }
              }else{AppMessage.fire({icon: 'error', text: '操作錯誤，請聯係管理員'})}
            })
            .catch(function (error) {alert(error)})
            }
        },
        mounted: function(){
          $('#DataView').DataTable({
              // language: {url: "{{ url_for('static', filename='plugins/DataTables/zh_hk.json') }}"},
              responsive: true,autoWidth: false,order:[1,'desc'],lengthChange:false,
              buttons: ["copy",
                {extend:'excel',footer:true,title:"","message":"收費記錄報表：{{Filters['ChargeTime']}}"},
                {extend:'print',footer:true,title:"","message":"收費記錄報表：{{Filters['ChargeTime']}}"}
              ]
            }).buttons().container().appendTo('#DataView_wrapper .col-md-6:eq(0)');
          // 删除
          $("#RecoveryModal").on('show.bs.modal', function (event) {
            let button = $(event.relatedTarget) 
            let condition = button.data('condition') 
            let licenseplate = button.data('licenseplate') 
            DataManager.RecoveryData.ParkingID = condition
            DataManager.RecoveryData.Message = "確認恢復車牌為" + licenseplate + "的{{ DataName }}嗎？"
          });
          // 预览
          $("#LicensePlateImgModal").on('show.bs.modal', function (event) {
            let button = $(event.relatedTarget) 
            DataManager.ViewData.VehicleType = button.data('vehicletype')
            DataManager.ViewData.LicensePlate = button.data('licenseplate')
            DataManager.ViewData.LicensePlateImg = button.data('licenseplateimg')
            DataManager.ViewData.EntranceTime = button.data('entrancetime')
          });
          // 时间范围
          laydate.render({
            elem: "#FilterEntranceTime",
            type: 'datetime',
            range: true,
            done: value => {DataManager.FiltersData.EntranceTime = value}
          });
        }
    });
    // 刷新条件
    DataManager.refresh_filters()
</script>
{% endblock %}

